import React, { FC, useEffect, Fragment, useRef, useState } from 'react'
import { connect, useDispatch, history } from 'umi';
import styled from 'styled-components';
import Carousel from '@/components/carousel'
import Card from '@/components/card'
import Scroll from '@/components/scroll';
import { actions } from './model'
// import { setToken } from '@/utils/storage'
// import { wachatLogin, isLogin } from '@/api/auth'

const HomeIndex: FC<any> = (props:any) => {
  const dispatch = useDispatch();
  const [page, setPage] = useState(0);
  const [tip, setTip] = useState('loading');
  const { home: { bannerList, goodsList, total, size } } = props;
  // 上拉加载

  const handlePullUp = () => {
    // 判断数据是否加载完毕
    // console.log('page * size:', (page + 1) * size, total)
    if ((page + 1) * size > total) {
      setTip(tip => '数据加载完毕了哦')
      setPage(() => 0)
    } else {
      setPage(() => page + 1)
      dispatch(actions.getHomeIndexList({ page, size }))
    }
  }

  // 下拉，暂未有此功能
  const handlePullDown = () => {
    console.log('handlePullDown')
  }

  // 授权登陆逻辑
  useEffect(() => {
    const { query: { code, state } } = history.location;
    if(code){
      dispatch(actions.getAuthWachatLogin({code, state}))
      // wachatLogin({ code, state }).then(result => {
      //   console.log('wachatLogin: --------result:', result)
      //   setToken(result.data.token)
      // })
    }else {
      dispatch(actions.getAuthIsLogin())
      // isLogin().then(result => {
      //   console.log('isLogin- result:', result)
      //   if ((result as any).code === 0) {
      //     // setTimeout(()=> {
      //       window.location.replace(`/api/user/wachatLogin?
      //       redirectUrl=${window.location.hostname}/home`)
      //     // },6000)
      //     // 第一步，做授权
      //   } else {
      //     // setToken(result.data.data.token)
      //     console.log('q:', result.data.data)
      //   }
      // })
    }
  }, [])

  useEffect(() => {
    // 进入页面先判断，数据是否只够加载一个页面
    handlePullUp()
    // 请求页面数据
    dispatch(actions.getHomeIndexList({}))
  }, [])

  return <HomeIndexContainer className="home-container">
    <Scroll
      // onScroll={forceCheck}
      pullUp={handlePullUp}
      pullDown={handlePullDown}
      // ref={scrollRef}
      pullUpLoading={true}
      tip={tip}
      // pullDownLoading={pullDownLoading}
    >
      <Carousel carouselArr = {bannerList}></Carousel>
      {
        goodsList && goodsList.length ? (<Fragment>
            {
              goodsList && goodsList.length && goodsList.map((item:any) => {
                return <Fragment key={item.id}>
                  <Card
                    id={item.id}
                    src={item.goodsimage} // goodsimage goodsimage_text
                    title={item.goodsname}
                    content={item.goodsdetail}>
                  </Card>
                  </Fragment>
              })
            }
        </Fragment>) : (<div>暂无数据...</div>)
      }
    </Scroll>
  </HomeIndexContainer>
}

export default connect(state => {
  return { ...state }
} )(HomeIndex);

const HomeIndexContainer = styled.div`
  /* padding: .2rem; */
  width: 100%;
  background: #F7F7F7;
  height: 100%;
  .home-content {
    overflow: auto;
  }
`;
